<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>会员列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>

<body>
<table class="layui-hide" id="test" lay-filter="test"></table>



<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-lg" lay-event="add">新增会员</button>
        <button class="layui-btn layui-btn-lg" lay-event="select">搜索</button>
    </div>
</script>


<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<script src="../../layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->

<script>
    layui.use('table', function(){
        var table = layui.table
            ,form = layui.form
        ,$ = layui.jquery;

        // table的渲染过程
        var tableIns =  table.render({
            elem: '#test'
            ,url:'http://localhost:8080/member/list'

            ,headers:{type:"getList"}
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                ,layEvent: 'LAYTABLE_TIPS'
                ,icon: 'layui-icon-tips'
            }]
            ,title: '会员数据表'
            ,cols: [[
                {field:'num', title:'编号', width:100, fixed: 'left', unresize: true, sort: true}
                ,{field:'name', title:'姓名', width:100}
                ,{field:'sex', title:'性别', width:100}
                ,{field:'birthday', title:'生日', width:200, sort: true,templet : "<div>{{layui.util.toDateString(d.birthday, 'yyyy-MM-dd')}}</div>"}
                ,{field:'phone', title:'电话', width:200}
                ,{field:'cpoint', title:'积分', width:100}
                ,{field:'jointime', title:'入会时间', width:200, sort: true,templet : "<div>{{layui.util.toDateString(d.jointime, 'yyyy-MM-dd')}}</div>"}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:600}
            ]]
            ,page: true
        });




        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'add':
                    // 添加优惠券的操作
                    {
                    layer.open({
                        title: '新增会员'
                        ,type:2
                        ,content: 'add.html'
                        ,area: ['45%', '85%']
                        ,end:function(){
                            location.reload();
                        }

                    });break;
                    }

                case 'select':
                    // 搜索会员操作
                {
                    layer.open({
                        title: '搜索会员'
                        , type: 2
                        , content: 'select.html'
                        , area: ['60%', '85%']
                        , end: function () {
                            location.reload();
                        }
                    });
                    break;
                }
            };
        });


        //监听行工具事件
        table.on('tool(test)', function(obj){
            // data:当前选中行的全字段json数据
            var data = obj.data;
            console.log(data)
            if(obj.event === 'edit'){

                // 打开一个弹层 layer ,把cpnEdit.html页面显示出来
                layer.open({
                    title: '编辑会员信息'
                    ,type:2
                    ,content:'update.html'
                    ,area: ['45%', '85%']
                    ,success: function(layero, index){   // 弹层打开时的回调操作
                        layer.iframeAuto(index)
                        // 获取cpnDetail页面中的根元素
                        var body = layer.getChildFrame('body', index);
                        console.log(data.sex)
                        // 找到对应的元素, 把值填充到对应的位置
                        body.find('input[name="name"]').val(data.name)
                        //设置修改携带的id
                        body.find('input[name="num"]').val(data.num)

                        body.find('input[name="phone"]').val(data.phone)
                        body.find('input[name="birthday"]').val(layui.util.toDateString(data.birthday, 'yyyy-MM-dd'))
                        body.find('input[name="cpoint"]').val(data.cpoint)
                        body.find('input[name="jointime"]').val(layui.util.toDateString(data.jointime, 'yyyy-MM-dd'))
                        body.find("input[name='sex'][title='"+data.sex+"']").prop("checked","checked")


                    }
                });
            } else if(obj.event === 'del'){
                layer.confirm('真的删除么', function(index){
                    $.ajax({
                        url: "/member/delete",
                        data:{
                            num:obj.data['num']
                        },
                        success:function(result){
                            if(result.code==0){
                                layer.msg('删除成功！',{icon:1,time:1000,scrollbar:false},function(){
                                    tableIns.reload();
                                });

                            }else{
                                layer.msg('删除失败！',{icon:2,time:1000});
                            }
                        }
                    })



                });
            }
        });
    });
</script>

</body>
</html>

